<template>
  <div>
    <el-form class="form-container" enctype="multipart/form-data" :rules="rules" :model="postForm" v-loading="formLoading" ref="postForm" label-width="220px" label-position="right">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><i class="square"></i>基础设置</span>
          <a :href="authUrl" target="_blank"><el-button class="item-btn" type="primary" style="margin-left: 10px" size="small">公众号授权给六欧智库管理 </el-button></a>
        </div>
        <el-form-item label="公众号名称：" prop="mpName">
          <el-input disabled v-model.trim="postForm.mpName" placeholder="请输入公众号名称" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="微信商户号：" prop="wxpayMchId">
          <el-input v-model.trim="postForm.wxpayMchId" placeholder="请输入微信商户号" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="微信支付密钥：" prop="wxpayKey">
          <el-input v-model.trim="postForm.wxpayKey" :disabled="wxpayKeyDisabled" placeholder="请输入微信支付密钥" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="二维码图片:(宽230*高230)：" prop="mpQrcode">
          <el-upload
            class="avatar-uploader"
            name="avatar"
            :action="mpUploadUrl"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleQrcodeSuccess">
            <img v-if="postForm.mpQrcode" :src="postForm.mpQrcode" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
            <span class="el-form-tip">（关注公众号时使用）</span>
        </el-form-item>
        <el-form-item label="公众号配置文件：">
          <el-upload
            class="upload-demo"
            style="width: 300px;"
            :action="mpVerifyUploadUrl"
            :on-success="handleMpDeployFileSuccess"
            :on-remove="handleMpDeployFileRemove"
            :file-list="mpDeployFileList"
            :limit="1">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><i class="square"></i>提现设置</span>
        </div>
        <el-form-item label="提现手续费：">
          <el-input v-model="postForm.withdrawRate" style="width: 80px;margin-right:10px;"></el-input>%
        </el-form-item>
        <el-form-item label="提现方式：">
          <el-checkbox label="开启银行卡提现" v-model="postForm.enableBankWithdraw" :true-label="1" :false-label="0"></el-checkbox>
          <el-checkbox label="开启微信提现" v-model="postForm.enableWxWithdraw" :true-label="1" :false-label="0"></el-checkbox>
        </el-form-item>
        <el-form-item label="微信提现key：">
          <el-upload
            class="upload-demo"
            style="width: 300px;"
            :action="fileUploadUrl"
            :on-success="handleWxpayKeyFileSuccess"
            :on-remove="handleWxpayKeyFileRemove"
            :file-list="wxpayKeyFileList"
            :limit="1">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="微信提现cert：">
          <el-upload
            class="upload-demo"
            style="width: 300px;"
            :action="fileUploadUrl"
            :on-success="handleWxpayCertFileSuccess"
            :on-remove="handleWxpayCertFileRemove"
            :file-list="wxpayCertFileList"
            :limit="1">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-card>


			<!--
			<div class="boder-bottom">
				<label >二维码logo小:(宽320*高320):</label><img style="vertical-align: middle;margin-right: 100px;" src="../../../../../build/logo.png" width="230" height="230"/>
				<el-button type="primary" @click="uploadPic('3')">更改</el-button>
			</div>
			<div class="boder-bottom">
				<label >vip价格:</label><el-input v-model="vipPrice" placeholder="请输入内容" style="width: 230px"></el-input>
			</div>
			<div class="boder-bottom">
				<label >svip价格:</label><el-input v-model="svipPrice" placeholder="请输入内容" style="width: 230px"></el-input>
			</div>
			<div class="boder-bottom">
				<label >默认用户数:</label><el-input v-model="defaultUser" placeholder="请输入内容" style="width: 230px"></el-input>
			</div>-->

			<!-- <div class="boder-bottom">
				<label >vip价格描述:</label><el-input v-model="vipDescribe" placeholder="请输入内容" style="width: 230px"></el-input>
			</div> -->

      <el-form-item style="padding: 10px 0">
        <el-button v-if="permission == 3" type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getMpSetting, saveMpSetting } from '@/api/basicDatum'
import { shopManage_basicDatum } from '@/utils/permission'

const postForm = {
  mpName: null,
  wxpayMchId: null,
  wxpayKey: null,
  mpQrcode: null,
  mpDeployFile: null,
  // isVideoFreeAfterSharing: 0,
  // isAudioFreeAfterSharing: 0,
  withdrawRate: null,
  enableBankWithdraw: 0,
  enableWxWithdraw: 0,
  wxpayKeyFile: null,
  wxpayCertFile: null,
  permission: 3,
}

const rules = {
  mpName: [{ required: true, message: '请输入公众号名称', trigger: 'blur' }],
  wxpayMchId: [{ required: true, message: '请输入微信商户号', trigger: 'blur' }],
  wxpayKey: [{ required: true, message: '请输入微信支付密钥', trigger: 'blur' }],
  mpQrcode: [{ required: true, message: '请上传二维码', trigger: 'submitForm' }],
}

export default {
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      wxpayKeyDisabled: false,
      mpDeployFileList: [],
      wxpayKeyFileList: [],
      wxpayCertFileList: [],
      mpUploadUrl: process.env.BASE_API + '/common/companies/imageUpload',
      fileUploadUrl: process.env.BASE_API + '/common/companies/fileUpload',
      mpVerifyUploadUrl: process.env.BASE_API + '/common/mpVerifyUpload',
      authUrl: null,
      formLoading: false,
      btnLoading: false
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_basicDatum()
    },
    initData() {
      getMpSetting().then(res => {
        if (res.data.data.mpData) {
          this.postForm = res.data.data.mpData
          this.authUrl = res.data.data.authUrl
        }
        if (this.postForm.wxpayMchId) {
          this.wxpayKeyDisabled = true
        }
        if (this.postForm.mpDeployFile) {
          this.mpDeployFileList = [{ url: this.postForm.mpDeployFile }]
        }
        if (this.postForm.wxpayKeyFile) {
          this.wxpayKeyFileList = [{ url: this.postForm.wxpayKeyFile }]
        }
        if (this.postForm.wxpayCertFile) {
          this.wxpayCertFileList = [{ url: this.postForm.wxpayCertFile }]
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleQrcodeSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.mpQrcode = res.data.imageUrl
      }
    },

    handleMpDeployFileSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.mpDeployFile = res.data.fileUrl
      }
    },
    handleMpDeployFileRemove(file, fileList) {
      this.postForm.mpDeployFile = null
    },
    handleWxpayKeyFileSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.wxpayKeyFile = res.data.fileUrl
      }
    },
    handleWxpayKeyFileRemove(file, fileList) {
      this.postForm.wxpayKeyFile = null
    },
    handleWxpayCertFileSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.wxpayCertFile = res.data.fileUrl
      }
    },
    handleWxpayCertFileRemove(file, fileList) {
      this.postForm.wxpayCertFile = null
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式')
      }
      if (!isLt3M) {
        this.$message.error('上传图片大小不能超过 3MB')
      }
      return isJPG && isLt3M
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return
          }
          this.btnLoading = true
          this.formLoading = true
          saveMpSetting(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
          	this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
	.boder-bottom {
		border-bottom: 1px solid #eee;
		overflow: hidden;
    padding-top: 10px
	}
</style>
